<template>
  <view class="ui-component-upload">
    <fui-section title="上传图片"></fui-section>
    <view style="padding: 20rpx;">
      <upload-image :max="9" @uploaded="uploadedImage"></upload-image>
    </view>
    <fui-section title="默认值"></fui-section>
    <view style="padding: 20rpx;">
      <upload-image :max="9" :defaultList="formData.defaultList" @uploaded="uploadedImage"></upload-image>
    </view>
    <fui-section title="上传头像"></fui-section>
    <view style="padding: 20rpx;">
      <upload-image type="avatar" @uploaded="uploadedAvatar"></upload-image>
    </view>
    <fui-section title="营业执照"></fui-section>
    <view style="padding: 20rpx;">
      <upload-image type="business" @uploaded="uploadedBusiness"></upload-image>
    </view>
    <fui-section title="身份证"></fui-section>
    <view style="display: flex; justify-content: space-between; padding: 20rpx;">
      <upload-image size="small" type="front" @uploaded="uploadedCardFront"></upload-image>
      <upload-image size="small" type="back" @uploaded="uploadedCardBack"></upload-image>
    </view>
    <fui-button @click="handleSubmit">测试提交</fui-button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import uploadImage from '@/components/upload/image'

const formData = ref({
  defaultList: ['https://res.firstui.cn/static/images/common/logo.png']
})

const uploadedImage = (e) => {
  console.log('uploadedImage', e)
}

const uploadedAvatar = (e) => {
  console.log('uploadedAvatar', e)
}

const uploadedBusiness = (e) => {
  console.log('uploadedBusiness', e)
}

const uploadedCardFront = (e) => {
  console.log('uploadedCardFront', e)
}

const uploadedCardBack = (e) => {
  console.log('uploadedCardBack', e)
}

const handleSubmit = () => {
  formData.value.defaultList = JSON.stringify(formData.value.defaultList)
}
</script>

<style lang="scss" scoped>
</style>
